<template>
    <div class="class-left">
        <ul>
            <li v-for="(itme,index) in className" :key="itme.id"
            :class="{aaactive:index===isss}"
            @click="aac(index)"

            >{{itme.name}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "ClassLeft",
    data() {
        return {
            className: [
                { id: 1, name: "衣服" },
                { id: 2, name: "鞋子" },
                { id: 3, name: "电脑用品" },
                { id: 4, name: "包包" },
                { id: 5, name: "化妆品" }
            ],
            isss:0,
            
           

        };
    },
   
    methods:{
        aac(index){
            this.isss = index
            
           this.$emit("myFun",index)
        }
    }
};
</script>
<style scoped>
.class-left{
    width: 150px;
    height: 270px;
    position:fixed;
    top: 70px;
    background-color: #f5f5f5;
}
ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
li{
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
    /* flex: 1; */
    border: 2px solid #f5f5f5;
    
    
    
    
}
.aaactive{
color: #ff5000;
}
</style>